<template>
  <div class="box">
    <h3>子组件</h3>

    <!--
        已知：
            指令一共14个，目前学习了13个，还剩一个 v-slot
            指令都是用于操作DOM的，如果不够还可以自定义
    -->
    <p>
      <!-- 特征，如果不点击文本框，则无法获得焦点 -->
      <input type="text" v-focus />
    </p>

    <!-- 如果是多个单词，要使用中横线 v-else-if -->
    <p v-big-num="num"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //   num: '5px'
      num: 10
    }
  },
  // 跟data同级，带s(可能会有很多)
  directives: {
    // 1. 定义指令时，不需要加 v- , 使用的时候需要加
    // bind钩子函数的简写方式
    // focus(el, data) {
    //   // console.log(el, data)
    //   // el: 需要操作的dom元素
    //   // data：需要处理的数据
    //   console.log(100)
    //   // 调用原生的事件
    //   el.focus()
    // }
    // 指令产生作用时，也会有几个钩子函数

    // 页面加载之后的操作方式
    focus: {
      inserted(el, data) {
        el.focus()
      }
    },

    // 建议写成驼峰命名的方式(小驼峰)
    'big-num'(el, { value }) {
      if (typeof value !== 'number') {
        throw Error('指令请传入数字，不然无法计算')
        // return
      }
      value *= 10
      el.textContent = value
      el.style.background = 'skyblue'
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: #eee;
  padding: 20px;
  margin: 10px;
}
</style>
